<template>
  <div class="box">
    <div style="margin-bottom: 20px;">
      <el-button :type="type=='新建调度任务'?'primary':''" @click="type='新建调度任务'" v-has>新建调度任务</el-button>
      <el-button :type="type=='调度任务操作'?'primary':''" @click="type='调度任务操作'" v-has>调度任务操作</el-button>
      <el-button :type="type=='规则配置'?'primary':''" @click="type='规则配置',addVisible=true" v-has>规则配置</el-button>
    </div>
    <template v-if="type=='新建调度任务'">
      <el-table :data="tableData" border fit stripe highlight-current-row>
        <el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.title"
          align="center" />
      </el-table>
    </template>
    <template v-if="type=='调度任务操作'">
      <changes />
    </template>
    <template v-if="type=='规则配置'">
      <el-dialog title="规则配置" :visible.sync="addVisible" :close-on-click-modal="false" width="30%">
        <el-form v-if="addVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px"
          class="demo-ruleForm">
          <el-row>
            <el-col :span="22">
              <el-form-item label="步骤名称" prop="roleName">
                <el-input v-model="ruleForm.roleName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="Input filed" prop="alias">
                <el-input v-model="ruleForm.alias" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="Ouput filed" prop="remark">
                <el-input v-model="ruleForm.remark" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </template>
  </div>
</template>

<script>
  import changes from "./components/changeProject.vue"
  export default {
    components: {
      changes
    },
    data() {
      return {
        type: '新建调度任务',
        addVisible: false,
        tableData: [{
          name: '任务1',
          steap: '导入文件-->扫描文件-->扫描完成-->导出文件-->保存重命名',
          time: new Date().toLocaleDateString(),
          user: 'zd',
          status: '初始化'
        }],
        tableHead: [{
            id: 1,
            label: '任务名称',
            title: 'name'
          },
          {
            id: 2,
            label: '任务步骤',
            title: 'steap'
          },
          {
            id: 3,
            label: '创建时间',
            title: 'time'
          },
          {
            id: 4,
            label: '创建人',
            title: 'user'
          },
          {
            id: 5,
            label: '任务状态',
            title: 'status'
          },
        ],
        ruleForm: {
          roleName: '',
          alias: '',
          remark: '',
        },
        rules: {
          roleName: [{
            required: true,
            message: '请输入步骤名称',
            trigger: 'blur'
          }],
          alias: [{
            required: true,
            message: '请输入Input filed',
            trigger: 'blur'
          }],
          remark: [{
            required: true,
            message: '请输入Output filed',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addVisible = false
            this.$message({
              type: 'success',
              message: '规则配置成功'
            })
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.addVisible = false
      },
    }
  };
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }
</style>
